<!--
 @description 门店像编辑
 @fileName Item.vue
 @author zengqiongying
 @created 2023/04/28 14:36:41
-->
<template>
  <div>
    <Cell
      v-if="!hideName"
      v-model="formData.name"
      title="门店名称"
      placeholder="请输入"
      :maxlength="10"
      :right="false"
      is-input
      required
      inputAlign="right"
    />
    <template v-if="!hideCity">
      <FieldArea v-if="editCity" title="所在省市区" v-model="areaData" :option="areaOption" fieldKey="id" required />
      <Cell v-else title="所在省市区" custom readonly :modelValue="shopCityName" />
    </template>
    <FieldPicker
      v-model="formData.shopClassify"
      v-model:label="formData.shopClassifyName"
      title="门店类型"
      placeholder="请选择"
      :url="`/data-dict/app/v2/dictionary/SHOP_TYPE`"
      label-name="dictName"
      value-name="dictCode"
      method="get"
      :params="dictParams"
      required
    />
    <Cell
      v-model="formData.shopAddr"
      title="详细地址"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
      required
    />

    <FieldPicker
      v-model="formData.cityLevel"
      v-model:label="formData.cityLevelName"
      title="城市级别"
      placeholder="请选择"
      :url="`/data-dict/app/v2/dictionary/CITY_LEVEL`"
      label-name="dictName"
      value-name="dictCode"
      method="get"
      :params="dictParams"
      required
    />
    <FieldPicker
      v-model="formData.marketLevelCode"
      v-model:label="formData.marketLevelName"
      title="市场层级"
      placeholder="请选择"
      :url="`/data-dict/app/v2/dictionary/MARKET_LEVEL`"
      label-name="dictName"
      value-name="dictCode"
      method="get"
      :params="dictParams"
      required
    />
  </div>
</template>

<script>
  import { reactive, toRefs, defineComponent, watch, computed } from 'vue'
  import Cell from '@/components/Cell/index.vue'
  import FieldPicker from '@/components/FieldPicker/index.vue'
  import FieldArea from '@/components/FieldArea/index.vue'
  import { initFormData } from '@/utils'
  export default defineComponent({
    name: 'DealerCustomerShopsItem',
    components: { Cell, FieldPicker, FieldArea },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      },
      hideName: {
        type: Boolean,
        default: false
      },
      hideCity: {
        type: Boolean,
        default: false
      },
      editCity: {
        type: Boolean,
        default: true
      },
      contactTypes: {
        type: Array,
        default: () => []
      }
    },
    setup(props, { emit }) {
      const datas = reactive({
        dictParams: { query: { appCode: 'slm', domainCode: 'marketing' }, type: 0 },
        areaData: {
          provinceCode: '',
          provinceName: '',
          province: '',
          cityCode: '',
          cityName: '',
          city: '',
          countyCode: '',
          countyName: '',
          county: '',
          townCode: '',
          townName: '',
          town: ''
        },
        areaOption: {
          provinceId: 'province',
          province: 'provinceName',
          provinceCode: 'provinceCode',
          cityId: 'city',
          city: 'cityName',
          cityCode: 'cityCode',
          districtId: 'county',
          district: 'countyName',
          districtCode: 'countyCode',
          townId: 'town',
          town: 'townName',
          townCode: 'townCode'
        },
        formData: {
          name: '',
          shopAddr: '',
          shopClassify: '',
          shopClassifyName: '',
          cityLevel: '',
          cityLevelName: '',
          marketLevelCode: '',
          marketLevelName: ''
        }
      })
      const shopCityName = computed(() => {
        const { provinceName, cityName, countyName, townName } = props.modelValue
        return `${provinceName || ''}${cityName || ''}${countyName || ''}${townName || ''}`
      })
      watch(
        () => props.modelValue,
        (d) => {
          if (!props.hideCity) {
            initFormData(d, datas.areaData)
          }
          initFormData(d, datas.formData)
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.areaData,
        (d) => {
          datas.formData = { ...datas.formData, ...d }
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.formData,
        (d) => {
          emit('update:modelValue', { ...props.modelValue, ...d })
        },
        {
          deep: true,
          immediate: true
        }
      )
      return {
        ...toRefs(datas),
        shopCityName
      }
    }
  })
</script>
<style lang="less" scoped></style>
